import React from 'react'
import { IconWrapper } from './style'
import Image1 from '../../../assets/images/1.png'
import Image2 from '../../../assets/images/2.png'
import Image3 from '../../../assets/images/3.png'
import Image4 from '../../../assets/images/4.png'

function IconNav() {
  const menu = [
    { title: '找案例', thing: '整屋灵感', image: Image1 },
    { title: '看百科', thing: '避坑清单', image: Image2 },
    { title: '装修服务', thing: '星级设计师', image: Image3 },
    { title: '选家具', thing: '颜值好货', image: Image4 }
  ]
  const icon = [
    { title: "装修报价", name: "#icon-xianxingjisuanqi" },
    { title: "装修管家", name: "#icon-kucunguanli" },
    { title: "户型诊断", name: "#icon-sousuo1" },
    { title: "好物热榜", name: "#icon-bianpinghuatubiaosheji-", },
    { title: "3D样板间", name: "#icon-jianzhu_loufang", }
  ]
  return (
    <IconWrapper>
      <div className="menu">
        <div className="menu-box">
          {menu.map(item => (
            <div className="menu-content" key={item.image}>
              <div className='title'>
                <p>{item.title}</p>
                <span>{item.thing}</span>
              </div>
              <div className='img'>
                <img src={item.image} style={{ width: '4rem', height: '4rem' }} />
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="icon-box">
        {icon.map(item => (
          <div className="icon-list" key={item.name}>
            <div>
              <svg className="icon" aria-hidden="true">
                <use xlinkHref={item.name}></use>
              </svg>
            </div>
            <span>{item.title}</span>
          </div>
        ))}
      </div>
    </IconWrapper>
  )
}

export default IconNav